<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
</head>
<style>
  /*具有title属性的都被选中*/
  [title]{
    color: fuchsia;
  }
  /*具有title属性并且具有died的属性值的元素被选中*/
  [title="died"]{
    color: coral;
  }
  /*具有title属性并且具有开头为a字母的属性值的元素被选中*/
  [title^="a"]{
    color: cornflowerblue;
  }
  /*具有title属性并且具有结尾为s字母的属性值的元素被选中*/
  [title$="s"]{
    color:pink;
  }
  /*具有title属性并且具有有z字母的属性值的元素被选中*/
  [title*="z"]{
    color: lawngreen;
  }
</style>
<body>
  <div title="name_huang">我姓黄</div>
  <div title="name_long">龙是我</div>
  <div title="died">龙下雨淹死黄</div>
  <div title="at_huang">at-黄</div>
  <div title="at_long">at-龙</div>
  <div title="at_huang_s">at-龙</div>
  <div title="at_huang_s">at-龙</div>
  <div title="asd_nz">at-龙</div>
  <div title="asd_zn">at-龙</div>
  <div title="azd_ns">at-龙</div>
</body>
</html>伪类选择器